<%@page contentType="text/html; charset=UTF-8" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>HXNT IP网络质量及应用监测系统</title>
        <meta name="author" content="Simon Shu" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/themes/myself/easyui.css" />
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/themes/icon.css" />
        <%@ include file="../common/taglibs.jsp" %>
        <%@ include file="../common/meta.jsp" %>
        <style type="text/css">
            #fm {
                margin: 0;
                padding: 10px 30px;
            } .ftitle {
                font-size: 14px;
                font-weight: bold;
                color: #666;
                padding: 5px 0;
                margin-bottom: 10px;
                border-bottom: 1px solid #ccc;
            } .fitem {
                margin-bottom: 5px;
            } .fitem label {
                display: inline-block;
                width: 80px;
            }
        </style>
        <script>
            $(function(){
                $("#studentTable").datagrid({
                    pagination: true, //分页显示 
                    loadMsg: "Processing, please wait …",
                    rownumbers: true,
                    fitColumns: true,
                    fit: true,
                    height: 'auto',
                    frozenColumns: [[{
                        field: 'ck',
                        checkbox: true
                    }, {
                        title: "编号",
                        field: 'id',
                        width: "80"
                    }]],
                    columns: [[{
                        field: 'itemId',
                        title: 'Item ID',
                        width: 80,
                        sortable: true
                    }, {
                        field: 'itemName',
                        title: 'Item Name',
                        width: 80,
                        sortable: true
                    }, {
                        field: 'itemCd',
                        title: 'Item CD',
                        width: 80,
                        align: 'right',
                        sortable: true
                    }, {
                        field: 'createdDate',
                        title: 'CreatedDate',
                        width: 80,
                        align: 'center',
                        sortable: true,
                        formatter: function(value, row, index){	
							if(value == null) return;						
                           	return value.replace('T',' ');
                        }
                    }]],
                    onDblClickRow: function(rowIndex, rowData){
                        $("#item_id").val(rowData.itemId);
                        $("#item_nm").val(rowData.itemName);
                        $("#item_cd").val(rowData.itemCd);
                        $("#dlg").dialog('open').dialog('setTitle', 'Edit User');
                    },
                    toolbar: [//工具栏上定义按钮 
                    {
                        id: 'btnadd',
                        text: 'Add',
                        iconCls: 'icon-add',
                        handler: function(){
                            openNewWindows();
                            
                        }
                    }, {
                        id: 'btndel',
                        text: 'Del',
                        iconCls: 'icon-remove',
                        handler: function(){
                            //删除选择的记录 
                            delStudent();
                        }
                    }, {
                        id: 'btnedit',
                        text: 'Edit',
                        iconCls: 'icon-edit',
                        handler: function(){
                            //修改层的样式，是div 显示 
                            $("#editStudentMessage").css({
                                display: 'block'
                            });
                            //模态窗体显示 
                            openEditStutable();
                        }
                    }]
                
                });
                
                
            });
            function queryData(){
                $('#studentTable').datagrid({
                    url: './list.action',
                    queryParams: {
                        "criteria.item_nm": $("#queryName").val(),
                        "criteria.item_cd": $("#queryTel").val()
                    }
                }).datagrid('load');
            }
            
            
            //将数据转化为 datagrid 数据 格式 
            function xorderListToGridData(msg){
                var encoded = $.toJSON(msg)
                var griddata = $.evalJSON(encoded);
                return griddata;
            }
            
            //add 事件 
            function openNewWindows(){
                //清空控件中的的值 
                $("#item_id").val("");
                $("#item_nm").val("");
                $("#item_cd").val("");
                $('#dlg').dialog('open').dialog('setTitle', 'New User');
            }
            
            
            //Ok 事件 
            function addStudentMessage(){
                //得到表格中的数据 
                var stuData = $("#studentTable").datagrid("getData");
                var ids = $("#item_id").val();
                
                $.ajax({
                    type: 'post',
                    url: './save.action',
                    data: {
                        "data.itemName": $("#item_nm").val(),
                        "data.itemCd": $("#item_cd").val(),
                        "data.itemId": $("#item_id").val()
                    },
                    success: function(msg){
                        var griddata = xorderListToGridData(msg);
                        var data = griddata.data;
                        if (griddata.success) {
                            if (ids == '') {
                                stuData.total++;
                                //加载行 
                                stuData.rows.push(data);
                                $("#studentTable").datagrid("loadData", stuData);
                            }
                            else {
                                for (var i = 0; i < stuData.rows.length; i++) {
                                    //如果 表格中的Id 和要进行修改的Id 相同的话 就进行修改 
                                    if (stuData.rows[i].id == ids) {
                                        $('#studentTable').datagrid('updateRow', {
                                            index: i,
                                            row: data
                                        });
                                    }
                                }
                            }
                            $('#dlg').dialog('close');
                        }
                        else {
                            $.messager.show({
                                title: 'Error',
                                msg: griddata.actionMessages[0]
                            });
                        }
                    }
                });
            }
            
            //del 事件 
            function delStudent(){
            
                //得到所有的数据 
                var stuData = $("#studentTable").datagrid("getData");
                //得到选中的数据 
                var rows = $("#studentTable").datagrid("getSelections");
                if (rows.length == 0) {
                    $.messager.alert("系统提示", "请选择要删除的行！", 'info');
                    return;
                }
                
                if (confirm('确定删除 这' + rows.length + '条记录?')) {
                    var ids = [];
                    for (var i = 0; i < rows.length; i++) {
                        for (var j = 0; j < stuData.rows.length; j++) {
                            if (stuData.rows[j].id == rows[i].id) {
                                ids.push(rows[i].id);
                                //$("#studentTable").datagrid("deleteRow", j);
                            }
                        }
                    }
                    
                    $.ajax({
                        type: 'post',
                        url: './delete.action',
                        data: {
                            ids: ids.join(',')
                        },
                        success: function(msg){
                            var griddata = xorderListToGridData(msg);
                            if (griddata.success) {
                                $.messager.alert('Info', 'Delete successfully!');
                                $("#studentTable").datagrid("load");
                            }
                            else {
                                $.messager.show({
                                    title: 'Error',
                                    msg: griddata.actionMessages[0]
                                });
                            }
                        }
                    });
                }
            }
            
            //edit 事件 
            function openEditStutable(){
                var rows = $("#studentTable").datagrid('getSelections');
                if (rows == 0) {
                    $.messager.alert("系统提示", "请选择要编辑的行！", 'info');
                    return;
                }
                
                if (rows.length > 1) {
                    $.messager.alert("系统提示", "对不起，该操作只能选择一行！", 'error');
                    return;
                }
                
                for (var i = 0; i < rows.length; i++) {
                    if (rows[i].id != "") {
                        $("#item_id").val(rows[i].itemId);
                        $("#item_nm").val(rows[i].itemName);
                        $("#item_cd").val(rows[i].itemCd);
                    }
                }
                $("#dlg").dialog('open').dialog('setTitle', 'Edit User');
            }
        </script>
    </head>
    <body>
        <div>
            <table>
                <tr>
                    <td>
                        Item Name:
                    </td>
                    <td>
                        <input class="easyui-validatebox" type="text" name="queryName" id="queryName"/>
                    </td>
                    <td>
                        Item CD:
                    </td>
                    <td>
                        <input class="easyui-validatebox" type="text" name="queryTel" id="queryTel" />
                    </td>
                    <td>
                        <a href="#" class="easyui-linkbutton" onclick="queryData();" style="width: 50px">Query</a>
                    </td>
                </tr>
            </table>
        </div>
        <div id="allStudentDiv">
            <table id="studentTable">
            </table>
        </div>
        <div id="dlg" class="easyui-dialog" style="width: 400px;height: 300px;padding: 5px;" closed="true" buttons="#dlg-buttons">
            <div style="padding:10px 0 10px 60px">
                <form id="ff" method="post">
                    <input type="hidden" id="item_id"/>
                    <table>
                        <tr>
                            <td>
                                Item Name:
                            </td>
                            <td>
                                <input class="easyui-validatebox" type="text" id="item_nm" data-options="required:true">
                                </input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Item CD:
                            </td>
                            <td>
                                <input class="easyui-validatebox" type="text" id="item_cd" data-options="required:true">
                                </input>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div style="text-align:center;padding:5px">
                <a href="#" class="easyui-linkbutton" onclick="addStudentMessage();" style="width: 50px">OK</a>
                <a href="#" class="easyui-linkbutton" onclick="$('#dlg').dialog('close');" style="width: 50px">Cancel</a>
            </div>
        </div>
    </body>
</html>
